<template>
	<li :class="{ button: true, active: isActive }" @click.stop="toggleActive">
		<slot></slot>
	</li>
</template>
  
<script>
export default {
	name: 'Button',
	props: {
		isActive: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		toggleActive() {
			this.$emit('toggle-active');
		}
	}
}
</script>
  
<style lang="less" scoped>
.button {
	min-width: 150px;
	position: relative;
	display: flex;
	justify-content: center;
	height: 3rem;
	cursor: pointer;
	text-align: center;
	align-items: center;

	&.active {
		&>span {
			border-bottom: 3px solid blueviolet;
		}
	}
}
</style>
  